<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 顶层添加组件 -->
        <PageTool ref="PageTool" :show-search="false" :btn-name="'员工'" @addEvent="addEvent" />
        <!-- 底部信息栏的展示 -->
        <el-table :data="userList" border>
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="setRoles(row.id)">设置角色</el-button>
              <el-button size="small" type="" @click="editEvent(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delEventFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 这个是分页组件 -->
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageSize._limit"
            :total="total"
            @current-change="pazeSizeFn"
          />
        </div>
      </el-card>
      <!-- 新增和编辑弹窗 -->
      <addDialog ref="addDialog" @addBtnFn="getUsersList" @editBtnFn="getUsersList" />
      <!-- 设置角色 -->
      <setRoles ref="setRoles" />
    </div>
  </div>
</template>

<script>
import { getRolesList } from '@/api/roles.js'
import { getUserList, getUserCount, setUserRegister, delUserRegister } from '@/api/employees.js'
// 这个是新增和编辑员工信息的弹窗组件
import addDialog from './components/addDialog.vue'
// 这个是设置角色弹出组件
import setRoles from './components/setRole.vue'
export default {
  components: {
    addDialog,
    setRoles
  },
  data() {
    return {
      userList: [], // 获取的员工列表
      pazesize: '', // 这个是显示的第几页码
      pageSize: {
        _limit: 5,
        _start: 0
      }, // 获取员工的数据的条数以及页数
      total: null // 员工的总条数
    }
  },
  async created() {
    this.getUsersList()
  },
  methods: {
    // 获取员工数据渲染
    async getUsersList() {
      // 获取员工的总数量
      const count = await getUserCount()
      // console.log(count)
      this.total = count.data

      // 获取员工列表
      const res = await getUserList(this.pageSize)
      // console.log(res)
      this.userList = res.data
    },
    // 点击切换分页的时候触发函数
    pazeSizeFn(pazeSize) {
      // console.log(pazeSize)
      this.pazesize = pazeSize
      this.pageSize._start = (this.pazesize - 1) * this.pageSize._limit
      // 点击页码，重新获取数据
      this.getUsersList()
    },
    // 添加员工
    addEvent(id) {
      // 根据id获取到编辑的员工信息
      this.$refs.addDialog.dialogFormVisible = true
      // console.log(this.$refs.addDialog)
    },
    // 编辑员工
    async editEvent(id) {
      const res = await setUserRegister(id)
      // console.log(res)
      this.$refs.addDialog.userDetail = res.data
      this.$refs.addDialog.dialogFormVisible = true
      // console.log(id)
    },
    // 设置角色
    async setRoles(id) {
      //  获取员工详情，
      const result = await setUserRegister(id)
      // console.log(result)
      this.$refs.setRoles.userDetail = result.data
      // 获取角色列表
      const res = await getRolesList()
      // console.log(res)
      this.$refs.setRoles.rolesList = res.data
      // 角色列表数据回显
      this.$refs.setRoles.checkList = result.data.roles.map(item => item.id)

      this.$refs.setRoles.dialogFormVisible = true
    },
    // 删除员工
    async delEventFn(id) {
      // 二次确认是否删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delUserRegister(id)
        this.userList.pop()
        if (this.userList.length < 1 && this.pazesize > 1) {
          this.pazesize = this.pazesize - 1
          // console.log(1)
          this.pageSize._start = (this.pazesize - 1) * this.pageSize._limit
        }
        this.$nextTick(() => {
          // 查询渲染数据
          this.getUsersList()
        })
        this.$message({
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除'
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.block{
  margin: 20px 0 15px;
  text-align: center;
}
::v-deep .before{
  margin-left: 85%;
}
</style>
